<template>
  <div class="disflex h100p flex-column">
    <div class="flex1 overauto pt10">
      <div class="video bgfff mb10" v-for="(v,k) in video_data" :key="k">
         <div class="disflex jsbet pl15 pr15 align-cen h49 fs16 c38 bbe8">
           <p class="fbold">短视频名称</p>
           <p>{{v.title}}</p>
         </div>
         <div class="pt10 pr15 pl15 pb10">
           <video class="w100p bradius5" :src="v.url"></video>
         </div>
         <div class="disflex h49 align-cen jsbet pl15 pr15 bte8" >
          <div class="be8 p15 lh0" @click="deleteVideo(v)">
            <img :src="delIcon" class="w15 h15">
          </div>
          <div class="disflex">
            <div class="disflex align-cen jsbet pl15 pr15 be8 p15 lh0">
              <img :src="detailsIcon" class="w15 h15 mr10">
              <p class="lh1 fs16 ca8" @click="todetall(v.videoId,'check')">详情</p>
            </div>
            <div class="disflex align-cen jsbet pl15 pr15 be8 p15 ml10 lh1">
              <img :src="editIcon" class="w15 h15 mr10">
              <p class="lh1 fs16 ca8" @click="todetall(v.videoId,'edit')">编辑</p>
            </div>
            <div class="disflex align-cen jsbet pl15 pr15 be8 p15 ml10 lh0">
              <img :src="soldoutIcon" class="w15 h15 mr10">
              <p class="lh1 fs16 ca8" @click="undercarriage(v)">{{ v.state == 1 ? '下架' : '上架'}}</p>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="video_btn bgfff">
      <div class="w100p disflex jscen align-cen bg_line_blue fs18 cfff" @click="addVideo">
        上传新视频
      </div>
      <!-- <div class="w50p disflex flex-column align-cen jscen" @click="addVideo">
        <p class="fs16 cblue mb5">上传新视频</p>
        <p class="fs12 cA8">您还可以上传<span class="cblue">{{' ' + num + ' '}}</span>个视频</p>
      </div>
      <div class="w50p disflex jscen align-cen bg_line_blue fs18 cfff" @click="promote_tap(3)">
        购买视频套餐
      </div> -->
    </div>
    <div class="posfix fix_top mark" @click="topay_tap" v-if="isShowTips">
      <div class="w290 h180 bgfff disflex flex-column bradius5 jsbet" @click.stop="">
        <div class="disflex flex-column align-cen pt25 pb35">
          <p class="fs18 c38 fbold mb20">提示</p>
          <p class="fs14 c78">您的剩余视频上传次数为0</p>
          <p class="fs14 c78">请购买视频套餐</p>
        </div>
        <div class="disflex">
          <div class="flex1 h44 w50p disflex bra_bottom_5_left c78 align-cen jscen bgfff fs18"
             @click="toOrderList_tap">
            取消
          </div>
          <div class="flex1 h44 w50p disflex bra_bottom_5_right align-cen jscen bgblue fs18 cfff"
               @click="toVideoList">
            确认
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WXAJAX from "@/utils/request";
export default {
  data() {
    return {
      num:0,
      delIcon:WXAJAX.imgBackUrl +'yimai_photos/crmRevision/ic_del.png',
      detailsIcon:WXAJAX.imgBackUrl +'yimai_photos/crmRevision/ic_details.png',
      editIcon:WXAJAX.imgBackUrl +'yimai_photos/crmRevision/ic_edit.png',
      playIcon:WXAJAX.imgBackUrl +'yimai_photos/crmRevision/img_play.png',
      soldoutIcon:WXAJAX.imgBackUrl +'yimai_photos/crmRevision/ic_soldout.png',
      video_data:[],
      dialog_show:false,
      total:'',
      isShowTips:false
    };
  },
  onShow(){
    this.getActivity()
    this.getActivityNum()
  },
  mounted(){
    this.getActivity()
    this.getActivityNum()
  },
  methods: {
    promote_tap(type){
      wx.navigateTo({url:`../../enterpriSeservices/setMeal/main?type=${type}`});
    },
    getActivity(){
      let v = this
      wx.showLoading()
      WXAJAX.POST({
        companyId:wx.getStorageSync('COMPANYID') || '',
        pageSize:999
      },'','/shortVideo/queryPage')
      .then((data, code) => {
          wx.hideLoading();
          if(data){

           v.video_data = data.list
          }
        })
      .catch(err => {
        wx.hideLoading();

      });
    },
    todetall(videoId,type){
      wx.navigateTo({
        url: '../editVideo/main?videoId=' + videoId + '&type=' + type
      });
    },
    addVideo(){
      if(this.num <= 0){
        this.isShowTips = true
        return
      }
      let type = 'add'
      wx.navigateTo({
        url: '../editVideo/main?type=' + type
      });
    },
    undercarriage(item){
      let state = ''
      let v = this
      if(item.state == 1){
        state = 0
        wx.showModal({
        title: '提示',
        content: '是否要下架视频',
        success: function (res) {
          if (res.confirm) {
              v.releaseVido(item,state)
            }
          }
        })
      }else{
        state = 1
        v.releaseVido(item,state)
      }
    },
    deleteVideo(item){
      wx.showModal({
        title: '提示',
        content: '是否要刪除视频',
        success: function (res) {
          if (res.confirm) {
            wx.showLoading()
            WXAJAX.POST({
              companyId:item.companyId,
              videoId:item.videoId
            },'','/shortVideo/deleteById')
            .then((data, code) => {
              wx.showToast({
                title: '删除成功',
                duration: 2000,
                icon: "none"
              });
              this.getActivity()
            })
            .catch(err => {
              wx.hideLoading();

            });
          } else if (res.cancel) {

          }
        }
      })
    },
    getActivityNum(){
      let v = this
      wx.showLoading()
      WXAJAX.POST({
        companyId:wx.getStorageSync('COMPANYID'),
      },'','/activity/queryCompanyService')
      .then((data, code) => {
          wx.hideLoading();
          v.num = data.videoSize - data.usedSize
          if(v.num <= 0){
            v.num = 0
          }
          v.total = data.videoSize
        })
      .catch(err => {
        wx.hideLoading();

      });
    },
    releaseVido(item,state){
      let v = this
      wx.showLoading()
      WXAJAX.POST({
        companyId:item.companyId,
        address:item.address,
        title:item.title,
        url:item.url,
        userId:item.userId,
        videoId:item.videoId,
        state:state
      },'','/shortVideo/update')
      .then((data, code) => {
        if(state == 1){
          wx.showToast({
            title: '上架成功',
            duration: 2000,
            icon: "none"
          });
        }
        setTimeout(function(){
          v.getActivity()
        },800)
      })
      .catch(err => {
        wx.hideLoading();
        // wx.showToast({
        //   title: '系统繁忙',
        //   duration: 2000,
        //   icon: "none"
        // });
      });
    },

    topay_tap(){
      this.isShowTips = false
    },
    toOrderList_tap(){
      this.isShowTips = false
    },
    toVideoList(){
      wx.navigateTo({
        url:`../../enterpriSeservices/setMeal/main?type=${3}`
      })
    }
  }
};
</script>

<style scoped>
.video_btn{
  display: flex;
  height: 98upx;
  width: 100%;
}
.topay{
  width: 220upx;
  text-align: center;
  line-height: 80upx;
  background: linear-gradient(90deg, #76DAD9, #51CDCC);
  height: 80upx;
  color: #fff;
  font-size: 32upx;
  font-weight: bold;
  border-radius:40upx;
  margin-left: 50upx;
}
.mark{
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
